<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>战略目标</el-breadcrumb-item>
      <el-breadcrumb-item>战略目标信息列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card>
      <!-- 任务列表区域 -->
      <el-table :data="tesklist" border stripe>
        <!-- 展开列 -->
        <!-- <el-table-column type="expand">
          <template slot-scope="scope">
            <pre>
              {{scope.row}}
            </pre>
          </template>
        </el-table-column> -->
        <!-- 索引列 -->
        <el-table-column type="index"></el-table-column>
        <el-table-column label="ID" prop="ID"></el-table-column>
        <el-table-column label="标题" prop="Title"></el-table-column>
        <el-table-column label="发布时间" prop="CreateTime">
          <template slot-scope="scope">
            {{scope.row.CreateTime | dateFormat}}
          </template>
        </el-table-column>
        <el-table-column label="任务状态" prop="State">
          <template slot-scope="scope">
            <el-tag type="warning" v-if="scope.row.State === 1">未完成</el-tag>
            <el-tag type="success" v-else-if="scope.row.State === 2">已完成</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300px">
          <template slot-scope="scope">
            <!-- 登录后要保存部门ID，这里把部门ID传进去来判断显示那个按钮 -->
            <el-button v-show="scope.row.ID" size="mini" type="primary" icon="el-icon-edit" @click="showEditTeskDialog(scope.row.ID)">上传数据并打分</el-button>
            <!-- <el-button size="mini" type="primary" icon="el-icon-edit" @click="showEditTeskDialog(scope.row.ID)">修改数据并打分</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[10, 20, 30, 50]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>
    <!-- 上传资料的对话框 -->
    <el-dialog title="上传资料" :visible.sync="editTeskDialogVisible" width="75%" @close="editTeskDialogClosed" :close-on-click-modal="false">
      <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="editForm.title"></el-input>
        </el-form-item>
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="40px" style="font-weight: bold; color: #909399;">序号</td>
            <td width="80px" style="font-weight: bold; color: #909399">评价指标</td>
            <td width="120px" style="font-weight: bold; color: #909399">评价要点</td>
            <td width="40px" style="font-weight: bold; color: #909399">分值</td>
            <td width="200px" style="font-weight: bold; color: #909399">评分标准</td>
            <td width="80px" style="font-weight: bold; color: #909399">自评打分</td>
            <td width="250px" style="font-weight: bold; color: #909399">附件</td>
            <td width="200px" style="font-weight: bold; color: #909399">说明</td>
          </tr>
          <tr>
            <td>1</td>
            <td rowspan="5">创新机制<br />（20分）</td>
            <td style="text-align: left;">将市场监管科技工作纳入工作规划</td>
            <td>3</td>
            <td style="text-align: left;">将市场监管科技工作纳入本地区产业发展规划或重点工作范围的，得3分；纳入本地市场监管“十四五”规划，得2分。</td>
            <td><el-input v-model="editForm.score1" placeholder="分数" style="width: 55px;"></el-input></td>
            <td style="text-align: left;"><el-upload
              class="upload-demo"
              action="http://192.168.1.25:100/api/upload"
              :on-preview="handlePreview"
              :on-remove="handleRemove1"
              :before-remove="beforeRemove"
              :on-success="handlesuccess1"
              multiple
              :limit="5"
              :on-exceed="handleExceed"
              :file-list="list1"
              ref="upload1"
              :disabled="dis"
              >
              <el-button size="small" type="primary" ref="up1" :disabled="dis">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">支持多文件上传，最多上传5个文件，文件大小不能超过10MB</div>
            </el-upload></td>
            <td><el-input
              type="textarea"
              :rows="3"
              placeholder="请输入内容"
              v-model="editForm.bz1">
            </el-input></td>
          </tr>
          <tr>
            <td>2</td>
            <td style="text-align: left;">制定贯彻科技强局战略实施意见</td>
            <td>3</td>
            <td style="text-align: left;">1.发布本地区贯彻省局科技强局战略具体实施意见的，得2分； <br />
            2.发布科技强局年度工作计划的，得1分。</td>
            <td><el-input v-model="editForm.score2" placeholder="分数" style="width: 55px;"></el-input></td>
            <td style="text-align: left;"><el-upload
              class="upload-demo"
              action="http://192.168.1.25:100/api/upload"
              :on-preview="handlePreview"
              :on-remove="handleRemove2"
              :before-remove="beforeRemove"
              :on-success="handlesuccess2"
              multiple
              :limit="5"
              :on-exceed="handleExceed"
              :file-list="list2"
              ref="upload2"
              :disabled="dis"
              >
              <el-button size="small" type="primary" :disabled="dis">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">支持多文件上传，最多上传5个文件，文件大小不能超过10MB</div>
            </el-upload></td>
            <td><el-input
              type="textarea"
              :rows="3"
              placeholder="请输入内容"
              v-model="editForm.bz2">
            </el-input></td>
          </tr>
          <tr>
            <td>3</td>
            <td style="text-align: left;">完善科技强局工作格局</td>
            <td>7</td>
            <td style="text-align: left;">1.建立科技工作专班，定期召开专题会议，研究部署科技工作，得2分。 <br />
              2.科技职能部门与专职科技管理人员配备完善，部门从事科技工作的专职人员不少于２名，得2分。 <br />
              3.优化科技创新氛围，定期组织举办交流论坛、业务培训、知识竞赛、技能比武等科技活动，得2分。 <br />
            4.及时总结科技强局战略实施成效，按照时间节点与工作要求，报送相关工作计划、总结、报表数据等材料，得1分。</td>
            <td><el-input v-model="editForm.score3" placeholder="分数" style="width: 55px;"></el-input></td>
            <td style="text-align: left;"><el-upload
              class="upload-demo"
              action="http://192.168.1.25:100/api/upload"
              :on-preview="handlePreview"
              :on-remove="handleRemove3"
              :before-remove="beforeRemove"
              :on-success="handlesuccess3"
              multiple
              :limit="5"
              :on-exceed="handleExceed"
              :file-list="list3"
              ref="upload3"
              :disabled="dis"
              >
              <el-button size="small" type="primary" :disabled="dis">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">支持多文件上传，最多上传5个文件，文件大小不能超过10MB</div>
            </el-upload></td>
            <td><el-input
              type="textarea"
              :rows="3"
              placeholder="请输入内容"
              v-model="editForm.bz3">
            </el-input></td>
          </tr>
          <tr>
            <td>4</td>
            <td style="text-align: left;">建立科技创新激励机制</td>
            <td>5</td>
            <td style="text-align: left;">1.建立科技创新考评机制，将科技强局工作绩效纳入领导班子和领导干部综合考核评价体系，2分。<br />
            2.建立科研经费绩效奖励、科技成果有效转化等方面的激励制度与举措，3分。</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>5</td>
            <td style="text-align: left;">保障科技创新经费投入</td>
            <td>2</td>
            <td style="text-align: left;">开拓资金来源渠道，建立科技创新经费保障机制，有效保障科技创新经费持续投入。本级政府投入专项经费正增长，给2分；增长率持平，得1分；负增长的不给分。</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
        </table>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editTeskDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editTesk(1)" ref="tempstorage" :disabled="dis">暂 存</el-button>
        <el-button type="primary" @click="editTesk(2)" ref="storage" :disabled="dis">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list1: [
        // {
        //   name: 'food.jpeg',
        //   url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        // },
        // {
        //   name: 'food2.jpeg',
        //   url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        // }
      ],
      list2: [],
      list3: [],
      // 获取用户列表的参数对象
      queryInfo: {
        query: '',
        // 当前的页数
        pagenum: 1,
        // 当前每页显示多少条数据
        pagesize: 10
      },
      // 所有任务列表数据
      tesklist: [],
      // 控制分配权限对话框的显示与隐藏
      total: 0,
      setRightDialogVisible: false,
      // 添加任务对话框显示或隐藏
      addTeskDialogVisible: false,
      // 所有权限的数据
      rightslist: [],
      // 树形控件的属性绑定对象
      treeProps: {
        label: 'authName',
        children: 'children'
      },
      // 默认选中的节点Id值数组
      defKeys: [],
      // 当前即将分配权限的角色id
      roleId: '',
      addForm: {
        title: ''
      },
      // 添加表单的验证规则对象
      addFormRules: {
        score1: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ]
      },
      // 添加任务对话框显示或隐藏
      editTeskDialogVisible: false,
      editForm: {
        id: '',
        score1: '',
        filelist1: [],
        bz1: '',
        score2: '',
        filelist2: [],
        bz2: '',
        score3: '',
        filelist3: [],
        bz3: ''
      },
      // cishu:0,
      // 修改表单的验证规则对象
      editFormRules: {
        bz1: [
          { required: true, message: '请输入登录名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        score1: [
          // { type: 'number', message: '必须为数字值', trigger: 'blur' },
          { min: 1, max: 3, message: '长度在 1 到 3 个字符', trigger: 'blur' }
        ],
        score2: [
          // { type: 'number', message: '必须为数字值', trigger: 'blur' },
          { min: 1, max: 3, message: '长度在 1 到 3 个字符', trigger: 'blur' }
        ],
        score3: [
          // { type: 'number', message: '必须为数字值', trigger: 'blur' },
          { min: 1, max: 3, message: '长度在 1 到 3 个字符', trigger: 'blur' }
        ]
      },
      dis: false
    }
  },
  created() {
    this.getTesksList()
  },
  methods: {
    // 获取任务的列表
    async getTesksList() {
      const { data: res } = await this.$http.get('tesksecinfo?dept=' + sessionStorage.getItem('dept') + '&pagenum=' + this.queryInfo.pagenum + '&pagesize=' + this.queryInfo.pagesize)
      console.log('获取二级任务的列表')
      // console.log(sessionStorage.getItem("dept"))
      console.log(res)
      if (res.meta.status !== 200) {
        return this.$message.error('获取任务列表失败！')
      }
      this.tesklist = res.data.items
      this.total = res.data.total
      // console.log('tesklist简化')
      // console.log(this.tesklist)
    },
    // 添加任务
    /* addTesk() {
      this.$refs.addFormRef.validate(async valid => {
        if (!valid) return
        // 可以发起添加用户的网络请求
        const { data: res } = await this.$http.post('tesk', this.addForm)
        console.log(res)
        this.$message.success('添加任务成功！')
        // 隐藏添加用户的对话框
        this.addTeskDialogVisible = false
        // 重新获取用户列表数据
        this.getTesksList()
      })
    }, */
    // 监听 pagesize 改变的事件
    handleSizeChange(newSize) {
      // console.log(newSize)
      this.queryInfo.pagesize = newSize
      this.getTesksList()
    },
    // 监听 页码值 改变的事件
    handleCurrentChange(newPage) {
      // console.log(newPage)
      this.queryInfo.pagenum = newPage
      // console.log(this.queryInfo)
      this.getTesksList()
    },
    // 根据Id删除对应的权限
    /* async removeRightById(role, rightId) {
      // 弹框提示用户是否要删除
      const confirmResult = await this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)

      if (confirmResult !== 'confirm') {
        return this.$message.info('取消了删除！')
      }

      const { data: res } = await this.$http.delete(
        `roles/${role.id}/rights/${rightId}`
      )

      if (res.meta.status !== 200) {
        return this.$message.error('删除权限失败！')
      }

      // this.getTesksList()
      role.children = res.data
    }, */
    // 查询任务打开对话框
    async showEditTeskDialog(id) {
      // console.log(id)
      const { data: res } = await this.$http.get('tesksec/' + id)
      console.log(res)
      if (res.meta.status !== 200) {
        return this.$message.error('查询任务信息失败！')
      }
      this.editForm.id = id
      console.log('显示单条任务信息')
      console.log(res.data)

      // console.log(this.editForm)
      this.editForm.score1 = res.data.score1
      this.editForm.score2 = res.data.score2
      this.editForm.score3 = res.data.score3
      this.editForm.bz1 = res.data.bz1
      this.editForm.bz2 = res.data.bz2
      this.editForm.bz3 = res.data.bz3
      this.editForm.filelist1 = res.data.filelist1
      this.editForm.filelist2 = res.data.filelist2
      this.editForm.filelist3 = res.data.filelist3
      this.editForm.title = res.title
      // console.log('state');
      // console.log(res.data);
      this.dis = false
      if (res.data.state === 2) {
        // console.log('屏蔽按钮');
        // console.log(res.data.state);
        this.dis = true
        // this.$refs.up1.disabl=true
        // this.$refs.tempstorage.disabled=true
        // this.$refs.storage.disabled=true
      }
      // console.log('res.data.filelist1:'+res.data.filelist1)
      // console.log(typeof res.data.filelist1)
      // console.log(typeof res.data.filelist2)
      // if (!res.data.filelist1.length ==0 || !res.data.filelist1 == null){
      // 对数据库数据进行组装显示附件
      if (res.data.filelist1 !== null) {
        // this.editForm.filelist1.push(res.data.filelist1.split(','))
        // this.editForm.filelist1.forEach(function(value,index,array){
        //   // array[index] == value;    //结果为true
        //   // sum+=value;
        // });
        // console.log('不为空')
        // 初始化组数
        // this.list1=[]
        // this.editForm.filelist1=[]
        // this.editForm.filelist1数组字符串拼接
        res.data.filelist1.split(',').forEach(item => {
          // this.editForm.filelist1.push({
          this.list1.push({
            name: item.split('|')[0],
            url: 'http://192.168.1.25:100/api/download/' + item.split('|')[1]
          })
        })

        console.log('this.editForm.filelist1:')
        console.log(this.editForm.filelist1)
        // this.list1=this.editForm.filelist1
        console.log('this.list1:')
        console.log(this.list1)
      } else {
        console.log('filelist1为空')
      }
      if (res.data.filelist2 !== null) {
        res.data.filelist2.split(',').forEach(item => {
          this.list2.push({
            name: item.split('|')[0],
            url: 'http://192.168.1.25:100/api/download/' + item.split('|')[1]
          })
        })
        console.log('this.editForm.filelist2:')
        console.log(this.editForm.filelist2)
        // this.list2=this.editForm.filelist2
        console.log('this.list2:')
        console.log(this.list2)
        // this.editForm.filelist2.push(res.data.filelist2.split(','))
      } else {
        console.log('filelist2为空')
      }
      if (res.data.filelist3 !== null) {
        // this.editForm.filelist3.push(res.data.filelist3.split(','))
        res.data.filelist3.split(',').forEach(item => {
          this.list3.push({
            name: item.split('|')[0],
            url: 'http://192.168.1.25:100/api/download/' + item.split('|')[1]
          })
        })
        console.log('this.editForm.filelist3:')
        console.log(this.editForm.filelist3)
        // this.list3=this.editForm.filelist3
        console.log('this.list3:')
        console.log(this.list3)
      } else {
        console.log('filelist3为空')
      }
      // console.log('filelist1:'+this.editForm.filelist1)
      // console.log('filelist2:'+this.editForm.filelist2)
      // console.log('filelist3:'+this.editForm.filelist3)
      this.editTeskDialogVisible = true
    },
    // 监听修改任务对话框的关闭事件
    editTeskDialogClosed() {
      // 清空表单内容
      this.$refs.editFormRef.clearValidate()
      // 清空上传组件内容
      this.$refs.upload1.clearFiles()
      this.$refs.upload2.clearFiles()
      this.$refs.upload3.clearFiles()
      this.list1 = []
      this.editForm.filelist1 = []
      this.list2 = []
      this.editForm.filelist2 = []
      this.list3 = []
      this.editForm.filelist3 = []
    },
    // 修改任务信息暂存并提交
    editTesk(temp) {
      if (temp === 1) {
        this.UpdataTesk(1)
      } else if (temp === 2) {
        this.$confirm('你确定要提交吗？提交后不能修改内容', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.UpdataTesk(2)
          this.$message({
            type: 'success',
            message: '提交成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消提交'
          })
        })
      }
    },
    // 修改任务 tj=1是提交任务，关闭对话框
    UpdataTesk(tj) {
      // console.log(this.editForm.score1)
      // console.log(this.editForm.score2)
      // console.log(this.editForm.score3)
      // console.log(this.editForm.filelist1)
      // console.log(this.editForm.filelist2)
      // console.log(this.editForm.filelist3)
      // console.log(this.editForm.bz1)
      // console.log(this.editForm.bz2)
      // console.log(this.editForm.bz3)
      console.log(this.editForm.filelist1)
      console.log(this.editForm.filelist2)
      console.log(this.editForm.filelist3)

      var filelist1 = ''
      if (this.editForm.filelist1 !== null) {
        filelist1 = this.editForm.filelist1.toString()
      } else {
        filelist1 = null
      }
      console.log(filelist1)
      var filelist2 = ''
      if (this.editForm.filelist2h !== null) {
        filelist2 = this.editForm.filelist2.toString()
      } else {
        filelist2 = null
      }
      console.log(filelist2)
      var filelist3 = ''
      if (this.editForm.filelist3 !== null) {
        filelist3 = this.editForm.filelist3.toString()
      } else {
        filelist3 = null
      }
      console.log(filelist3)

      // var filelist1 = ''
      // if (this.editForm.filelist1.length !== 0){
      //   this.editForm.filelist1.forEach(item=>{
      //     filelist1 += item.name + '|' + item.url + ','
      //   })
      //   filelist1=filelist1.slice(0,filelist1.length-1)
      // }
      // console.log(filelist1)
      // var filelist2= ''
      // if (this.editForm.filelist2.length !== 0){
      //   this.editForm.filelist2.forEach(item=>{
      //     filelist2 += item.name + '|'+ item.url + ','
      //   })
      //   filelist2 = filelist2.slice(0,filelist2.length-1)
      // }
      // else{
      //   filelist2 = null
      // }
      // console.log(filelist2)
      // var filelist3 = ''
      // if (this.editForm.filelist3.length !==0){
      //   this.editForm.filelist3.forEach(item=>{
      //     filelist3 += item.name + '|' + item.url + ','
      //   })
      //   filelist3 = filelist3.slice(0,filelist3.length-1)
      // }
      // else{
      //   filelist3 = null
      // }
      // console.log(filelist3)
      // var filelist2=this.editForm.filelist2.toString()
      // var filelist3=this.editForm.filelist3.toString()

      // 发起修改用户信息的数据请求
      this.$refs.editFormRef.validate(async valid => {
        if (!valid) return
        // console.log(parseInt(this.editForm.score1),parseInt(this.editForm.score2),parseInt(this.editForm.score3))
        // console.log(filelist1,filelist2,filelist3)
        // console.log(this.editForm.bz1,this.editForm.bz2,this.editForm.bz3)
        const { data: res } = await this.$http.put(
          'tesksecedit/' + this.editForm.id,
          {
            score1: parseInt(this.editForm.score1),
            score2: parseInt(this.editForm.score2),
            score3: parseInt(this.editForm.score3),
            filelist1: this.editForm.filelist1,
            filelist2: this.editForm.filelist2,
            filelist3: this.editForm.filelist3,
            bz1: this.editForm.bz1,
            bz2: this.editForm.bz2,
            bz3: this.editForm.bz3,
            State: tj
          }
        )
        if (res.meta.status !== 200) {
          return this.$message.error('更新任务信息失败！')
        }
        // 刷新数据列表
        // this.getTesksList()
        // 提示修改成功
        this.$message.success('更新任务信息成功！')
      })
      if (tj === 2) {
        // 关闭对话框
        this.editTeskDialogVisible = false
      }
      // // 刷新数据列表
      // this.getTesksList()
      // // 提示修改成功
      // this.$message.success('更新任务信息成功！')
    },
    // 展示分配权限的对话框
    /* async showSetRightDialog(role) {
      this.roleId = role.id
      // 获取所有权限的数据
      const { data: res } = await this.$http.get('rights/tree')

      if (res.meta.status !== 200) {
        return this.$message.error('获取权限数据失败！')
      }

      // 把获取到的权限数据保存到 data 中
      this.rightslist = res.data
      console.log(this.rightslist)

      // 递归获取三级节点的Id
      this.getLeafKeys(role, this.defKeys)

      this.setRightDialogVisible = true
    }, */
    // 通过递归的形式，获取角色下所有三级权限的id，并保存到 defKeys 数组中
    /* getLeafKeys(node, arr) {
      // 如果当前 node 节点不包含 children 属性，则是三级节点
      if (!node.children) {
        return arr.push(node.id)
      }
      node.children.forEach(item => this.getLeafKeys(item, arr))
    }, */
    // 监听添加任务对话框的关闭事件
    /* addTeskDialogClosed() {
      this.$refs.addFormRef.resetFields()
      // this.defKeys = []
    }, */
    // 点击为角色分配权限
    /* async allotRights() {
      const keys = [
        ...this.$refs.treeRef.getCheckedKeys(),
        ...this.$refs.treeRef.getHalfCheckedKeys()
      ]

      const idStr = keys.join(',')

      const { data: res } = await this.$http.post(
        `roles/${this.roleId}/rights`,
        { rids: idStr }
      )

      if (res.meta.status !== 200) {
        return this.$message.error('分配权限失败！')
      }

      this.$message.success('分配权限成功！')
      this.getTesksList()
      this.setRightDialogVisible = false
    }, */
    // 上传文件后执行上传列表字符串拼接1
    handlesuccess1(response) {
      console.log(response)
      // this.cishu=this.cishu+1
      // console.log(file)
      // console.log(file.response.data[0].fileCode)
      // 1. 拼接得到一个图片信息对象
      const picInfo = response.data[0].fileCode
      const picName = response.data[0].originFileName
      // 2. 将图片信息对象，push 到pics数组中
      if (this.editForm.filelist1 == null) {
        this.editForm.filelist1 = picName + '|' + picInfo
      } else {
        this.editForm.filelist1 = this.editForm.filelist1 + ',' + picName + '|' + picInfo
      }
      // this.editForm.filelist1.push(picName + '|' + picInfo)
      console.log('this.editForm.filelist1:')
      console.log(this.editForm.filelist1)
      // console.log('cishu:'+this.cishu)
    },
    // 上传文件后执行上传列表字符串拼接2
    handlesuccess2(response) {
      // 1. 拼接得到一个图片信息对象
      const picInfo = response.data[0].fileCode
      const picName = response.data[0].originFileName
      // 2. 将图片信息对象，push 到pics数组中
      // this.editForm.filelist2.push(picName + '|' + picInfo)
      if (this.editForm.filelist2 == null) {
        this.editForm.filelist2 = picName + '|' + picInfo
      } else {
        this.editForm.filelist2 = this.editForm.filelist2 + ',' + picName + '|' + picInfo
      }
      console.log('this.editForm.filelist2:')
      console.log(this.editForm.filelist2)
    },
    // 上传文件后执行上传列表字符串拼接3
    handlesuccess3(response) {
      // 1. 拼接得到一个图片信息对象
      const picInfo = response.data[0].fileCode
      const picName = response.data[0].originFileName
      // 2. 将图片信息对象，push 到pics数组中
      if (this.editForm.filelist3 == null) {
        this.editForm.filelist3 = picName + '|' + picInfo
      } else {
        this.editForm.filelist3 = this.editForm.filelist3 + ',' + picName + '|' + picInfo
      }
      // this.editForm.filelist3.push(picName + '|' + picInfo)
      console.log('this.editForm.filelist3:')
      console.log(this.editForm.filelist3)
    },
    // 下载附件
    handlePreview(file) {
      console.log('file')
      console.log(file)
      console.log(file.url)
      // const { data: res } = this.$http.get('http://192.168.1.25:100/api/download/LdH3ESOy6SnQbg54cTbvbQVEKpWIgcoBQxm%5ENaMORPly0i4rJlK%5EylAgnqhzmmQL')
      // console.log(res)
      // console.log(this.editForm.filelist1)
      // console.log(file.response.data[0].fileCode)
      // console.log(window.navigator.msSaveOrOpenBlob)
      if (window.navigator.msSaveOrOpenBlob) {
        console.log('执行1')
        navigator.msSaveBlob(file.raw, file.name)
      } else {
        console.log('执行2')
        var link = document.createElement('a')
        // console.log(document)
        // console.log(link)
        link.download = file.name
        // console.log(link.download)
        // link.href = window.URL.createObjectURL(file.raw)
        link.href = file.url
        // console.log(link.href)
        link.click()
        window.URL.revokeObjectURL(link.href)
      }
      // const { data: res } = await this.$http.get('download/' + file.response.data[0].fileCode)
      // console.log(res)
    },
    // 文件超出个数限制时执行的函数
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    // 附件删除前执行的函数
    beforeRemove(file) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    // 附件删除函数
    async handleRemove1(file, fileList) {
      console.log('删除后')
      console.log(file)
      // console.log('codeid:' + file.response.data[0].fileCode)
      // console.log('fileFullPath:' + file.response.data[0].fileFullPath)
      // console.log('fileFullPath:' + file.response.data[0].fileFullPath.replace(':' , '%3A').replace(/\\/g, '%5C'))
      console.log(fileList)

      this.editForm.filelist1 = null
      if (fileList.length !== 0) {
        fileList.forEach(item => {
          if (this.editForm.filelist1 == null) {
            this.editForm.filelist1 = item.name + '|' + item.url.replace('http://192.168.1.25:100/api/download/', '')
          } else {
            this.editForm.filelist1 = this.editForm.filelist1 + ',' + item.name + '|' + item.url.replace('http://192.168.1.25:100/api/download/', '')
          }
        })
      }
      console.log('this.editForm.filelist1')
      console.log(this.editForm.filelist1)
      try {
        const { data: res } = await this.$http.delete('file/' + file.response.data[0].fileCode + '/filepath/' + file.response.data[0].fileFullPath.replace(':', '%3A').replace(/\\/g, '%5C'))
        if (res.meta.status !== 200) {
          return this.$message.error('删除附件失败！')
        }
        console.log(res.meta)
      } catch (e) {
        // TODO handle the exception
        console.log('服务器文件删除失败')
      }
      // const { data: res } = await this.$http.get('download/' + file.response.data[0].fileCode)
    },
    async handleRemove2(file, fileList) {
      console.log('删除后')
      console.log(file)
      // console.log('codeid:' + file.response.data[0].fileCode)
      // console.log('fileFullPath:' + file.response.data[0].fileFullPath)
      // console.log('fileFullPath:' + file.response.data[0].fileFullPath.replace(':' , '%3A').replace(/\\/g, '%5C'))
      console.log(fileList)
      this.editForm.filelist2 = null
      if (fileList.length !== 0) {
        fileList.forEach(item => {
          if (this.editForm.filelist2 == null) {
            this.editForm.filelist2 = item.name + '|' + item.url.replace('http://192.168.1.25:100/api/download/', '')
          } else {
            this.editForm.filelist2 = this.editForm.filelist2 + ',' + item.name + '|' + item.url.replace('http://192.168.1.25:100/api/download/', '')
          }
        })
      }
      console.log('this.editForm.filelist2')
      console.log(this.editForm.filelist2)
      try {
        const { data: res } = await this.$http.delete('file/' + file.response.data[0].fileCode + '/filepath/' + file.response.data[0].fileFullPath.replace(':', '%3A').replace(/\\/g, '%5C'))
        if (res.meta.status !== 200) {
          return this.$message.error('删除附件失败！')
        }
        console.log(res.meta)
      } catch (e) {
        // TODO handle the exception
        console.log('服务器文件删除失败')
      }
      // const { data: res } = await this.$http.get('download/' + file.response.data[0].fileCode)
    },
    async handleRemove3(file, fileList) {
      console.log('删除后')
      console.log(file)
      // console.log('codeid:' + file.response.data[0].fileCode)
      // console.log('fileFullPath:' + file.response.data[0].fileFullPath)
      // console.log('fileFullPath:' + file.response.data[0].fileFullPath.replace(':' , '%3A').replace(/\\/g, '%5C'))
      console.log(fileList)
      this.editForm.filelist3 = null
      if (fileList.length !== 0) {
        fileList.forEach(item => {
          if (this.editForm.filelist3 == null) {
            this.editForm.filelist3 = item.name + '|' + item.url.replace('http://192.168.1.25:100/api/download/', '')
          } else {
            this.editForm.filelist3 = item.editForm.filelist3 + ',' + item.name + '|' + item.url.replace('http://192.168.1.25:100/api/download/', '')
          }
        })
      }
      console.log('this.editForm.filelist3')
      console.log(this.editForm.filelist3)
      try {
        const { data: res } = await this.$http.delete('file/' + file.response.data[0].fileCode + '/filepath/' + file.response.data[0].fileFullPath.replace(':', '%3A').replace(/\\/g, '%5C'))
        if (res.meta.status !== 200) {
          return this.$message.error('删除附件失败！')
        }
        console.log(res.meta)
      } catch (e) {
        // TODO handle the exception
        console.log('服务器文件删除失败')
      }
      // const { data: res } = await this.$http.get('download/' + file.response.data[0].fileCode)
    }
    // 复杂表格
    /* objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    } */
  }
}
</script>

<style lang="less" scoped>
.el-tag {
  margin: 7px;
}

.bdtop {
  border-top: 1px solid #eee;
}

.bdbottom {
  border-bottom: 1px solid #eee;
}

.vcenter {
  display: flex;
  align-items: center;
}
.el-table {
  margin-top: 0px;
}
table,table tr th, table tr td {
  border:1px solid #EBEEF5;
  padding: 12px 10px;
  line-height: 23px;
  color: #606266;
  text-align: center;
}
table{
  border-collapse: collapse;
  }
</style>
